<template>
<a-form :form="form">
    <a-row :gutter="24">
        <a-col :key="1" :span="12">
            <a-form-item label="设备类型" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                          :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                <a-select v-decorator="['type',{rules: [{ required: true, message: '请选择设备类型' }]}]"
                          placeholder="请选择设备类型" @change="typeChange">
                    <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                        {{v.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :key="2" :span="12">
            <a-form-item label="设备型号" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                          :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                <a-select v-decorator="['model',{rules: [{ required: true, message: '请选择设备型号' }]}]"
                          placeholder="请选择设备型号">
                    <a-select-option v-for="v in models" :key="v.id" :value="v.id">
                        {{v.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :key="3" :span="12">
            <a-form-item label="设备编号" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                          :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                <a-input placeholder="请输入设备编号" v-decorator="[
                    'sn',{rules: [{ required: true, message: '请输入设备编号' }]}]"/>
            </a-form-item>
        </a-col>
        <a-col :key="4" :span="12">
            <a-form-item label="归属账号" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                          :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                <a-select
                        v-decorator="['user_id',{rules: [{ required: true, message: '请选择归属账号' }]}]"
                        placeholder="请选择归属账号">
                    <a-select-option v-for="v in users" :key="v.id" :value="v.id">
                        {{v.username}}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :key="5" :span="24">
            <a-form-item label="备注" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                          :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                <a-textarea placeholder="请输入备注" v-decorator="['remark']" :rows="4"/>
            </a-form-item>
        </a-col>
    </a-row>
</a-form>

</template>




<script>
    export default {
      props:['users','statuses'],
    	data(){
    		return {
                form: this.$form.createForm(this),
                models:[],
                types:[]
            }
    	},
    	mounted(){
    		this.http("get", "devicemodel/typemodel").then(res => {
                this.types = res
            })
		  },
    	methods: {
		    onSubmit(form){
          this.form.validateFields((err, values) => {
            if(!err){
              this.postData(values).then(res=>{
                if (res.id) {
                    this.$message.success(res.msg, 1);
                    this.$emit("getList")
                    this.$emit("hideCreate")
                    this.form.resetFields();
                } else {
                    //this.error = res.msg
                    //setTimeout(()=>{this.error = ''},3000)
                    this.$message.error(res.msg);
                }
              })
              
            }
          })
          
        },
        typeChange(key){
            this.types.some(item=>{
                if(item.id == key){
                    this.models = item.models
                    return true
                }
            })
            this.form.setFields({model:''});
        },
        async postData(param){
          let data = await this.http('post','device/create',param);
          return data;
        }
    	}
    
    
 }
</script>

